<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程-行程-121邹圣洁</title>
    <link rel="stylesheet" href="download/font_ewrrrydj26/iconfont.css">
    <style>
        body,ul,p{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url(img/bjt.jpg);
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #303030;
            display: inline-block;
            font-size: 20px;
        }
        #nav{
            position: fixed;
            width: 100%;
            left: 0;
            bottom: 0;
            z-index: 100;
            display: flex;
            background-color: #fff;
            box-shadow: 0px 0px 0px 3px rgb(239, 239, 239);
        }
        #nav li{
            width: 20%;
            text-align: center;
            font-family: "华文细黑";
            font-size: 14px;
        }
        .iconfont{
            font-size: 30px;
            letter-spacing: 20px;
        }
        .icon-xiaoxi,.icon-SX_015,.icon-wodejifen{
            font-size: 28px;
        }
        p{
            margin-right: 20px;
            font-size: 14px;
            font-weight: normal;
        }
        #nav a:hover,a:active{
            color: #3d85fb;
        }

        #main{
            width: 100%;
        }
        #head{
            width: 100%;
            height: 55px;
            background-color: rgba(255, 255, 255, 0);
            z-index: 100;
            position: fixed;
            top: 0;
        }
        #head ul{
            width: 100%;
            display: flex;
            margin: 0 auto;
            padding-top: 10px;
        }
        #head ul li:nth-child(1){
            flex-grow: 1;
        }
        #head ul li p{
            font-size: 13px;
            color: #fff;
        }
        .icon-lvyouxianlu{
            font-size: 25px;
            margin-left: 10px;
            color: #fff;
        }
        .icon-gengduo{
            font-size: 22px;
            color: #fff;
        }
        .gd{
            margin-top: 3px;
        }
        .xc{
            width: 100%;
            margin-top: 105px;
        }
        .xc h1{
            margin-left: 30px;
            color: #fff;
            font-weight: normal;
            letter-spacing: 2px;
            margin-bottom: 14px;
        }
        .yj{
            width: 100%;
            height: 50px;
            background-color: #fff;
            border-radius: 30px;
            margin-top: 20px;
        }
        .sc{
            width: 100%;
            margin: 0 auto;
            text-align: center;
            background-color: #fff;
            height: 350px;
            margin-top: -50px;
        }
        .sc h1{
            color: #1f1f1f;
            font-weight: normal;
            margin-bottom: 5px;
            letter-spacing: 3px;
        }
        .sc span{
            color: #5e5e5e;
            font-size: 54px;
            font-weight: bold;
        }
        .sc p{
            font-size: 19px;
            margin-left: 80px;
            color: #313131;
            letter-spacing: 1px;
        }
        .sc ul{
            width: 70%;
            margin: 0 auto;
            display: flex;
            margin-top: 45px;
        }
        .sc ul li{
            width: 33.33%;
            text-align: center;
        }
        .sc ul li img{
            width: 80px;
            height: 80px; 
        }
        .sc ul li div{
            width: 100px;
            height: 100px;
            background-color: #d8ebff;
            border-radius: 50px;
            border: 2px solid #d2e6fc;
            line-height: 100px;
            margin: 0 auto;
        }
        .sc ul li p{
            font-size: 14px;
            margin-top: 10px;
            color: #313131;
            margin-left: 15px;
        }
        #big{
            background-color: #fff;
        }
        #dhl{
            width: 100%;
            /* margin-top: 80px; */
            
        }
        #dhl ul{
            width: 90%;
            display: flex;
            margin-top: 60px;
            margin: 0 auto;
            height: 50px;
            line-height: 50px;
        }
        #dhl ul li{
            font-size: 18px;
            width: 20%;
            text-align: center;
            color: #313131;
        }
        #dhl ul li:hover{
            font-size: 22px;
            color: #000000;
        }
        .box{
            width: 100%;
            margin-top: 20px;
            background-color: #dddddd;
        }
        .stxw, .stxw1{
            display: flex;
            flex-wrap: wrap;
            width: 92%;
            margin: 0 auto;
        }
        .stxw li,.stxw1 li{
            margin-left: 20px;
            width: 320px;
            margin-top: 20px;
            background-color: #fff;
            border-radius: 10px;
        }
        .stxw li img,.stxw1 li img{
            height: 320px;
            width: 320px;
        }
        .stxw li .title,.stxw1 li .title{
            font-size: 22px;
            margin-top: 10px;
            margin-left: 10px;
        }
        .stxw li .n,.stxw li .n2,.stxw1 li .n,.stxw1 li .n2{
            background-color: rgba(168, 212, 245, 0.849);
            border: none;
            font-size: 13px;
            border-radius: 3px;
            color: #276cdc;
            margin-top: 10px;
            margin-left: 10px;
        }
        .stxw li .hui,.stxw1 li .hui{
            font-size: 16px;
            color: #585858;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
        }
        .jzz{
            width: 120px;
            display: flex;
            height: 150px;
            margin-top: 50px;
            margin: 0 auto;
            text-align: center;
        }
        .jzz p{
            color: rgb(108, 108, 108);
            font-size: 13px;
            margin-top: 40px;
        }
        .icon-a-jiazaizhongdaxiao{
            color: #008aff;
            margin-top: 35px;
        }
        .none{
            display: none;
            /* background-color: #dddddd; */
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li>
            <a href="index.html">
                <span class="iconfont icon-shouye"></span>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="sheqv.html">
                <span class="iconfont icon-shequ"></span>
                <p>社区</p>
            </a>
        </li>
        <li>
            <a href="xiaoxi.html">
                <span class="iconfont icon-xiaoxi"></span>
                <p>消息</p>
            </a>
        </li>
        <li>
            <a href="xingcheng.html">
                <span class="iconfont icon-SX_015"></span>
                <p>行程</p>
            </a>
        </li>
        <li>
            <a href="wode.html">
                <span class="iconfont icon-wodejifen"></span>
                <p>我的</p>
            </a>
        </li>
    </ul>
    <div id="main">
        <div id="head">
            <ul>
                <li></li>
                <li>
                    <span class="iconfont icon-lvyouxianlu" id="tb1"></span>
                    <p id="s1">我的路线</p>
                </li>
                <li>
                    <span class="iconfont icon-gengduo" id="tb2"></span>
                    <p class="gd" id="s2">更多</p>
                </li>
            </ul>
        </div>
        <div class="xc">
            <h1>我的行程</h1>
        </div>
        <div class="yj"></div>
    </div>
    <div class="sc">
        <h1><span>“</span> 山川依旧 · 开始旅行新体验</h1>
        <p>您没有待出发的行程 可在此计划并管理旅程</p>
        <ul>
            <li>
                <div><img src="img/t1.png"></div>
                <p>创建旅行路线</p>
            </li>
            <li>
                <div><img src="img/t2.png"></div>
                <p>关注航班</p>
            </li>
            <li>
                <div><img src="img/t3.png"></div>
                <p>关注火车</p>
            </li>
        </ul>
    </div>
    <div id="big">
    <div id="dhl">
        <ul id="dh">
            <li class="li">精选</li>
            <li class="li">探索大连</li>
            <li class="li">当地必玩</li>
            <li class="li">露营</li>
            <li class="li">亲子游玩</li>
        </ul>
    </div>
    <div class="box">
        <ul class="stxw1">
            <li>
                <img src="img/jx1.png">
                <p class="title">遛娃不出京，轻松周末周边游</p>
                <input type="submit" value="八达岭长城"  class="n"/>
                <p class="hui">1766人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/jx2.png">
                <p class="title">轻松度假，跟小动物亲密接触</p>
                <input type="submit" value="雍和宫"  class="n"/>
                <p class="hui">9941人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/jx3.png">
                <p class="title">三亚美高梅私人沙滩豪华酒店|夏日海岛风情</p>
                <input type="submit" value="三亚千古情景区"  class="n"/>
                <p class="hui">1194人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/jx4.png">
                <p class="title">夕阳下的久九丈崖，看长岛最美的渤海日落</p>
                <input type="submit" value="养马岛"  class="n"/><input type="submit" value="东炮台海滨风景区"  class="n2"/>
                <p class="hui">1209人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/jx5.png">
                <p class="title">一直期待的北京欢乐谷，重新开园喽！</p>
                <input type="submit" value="北京欢乐谷"  class="n"/><input type="submit" value="奥林匹克公园"  class="n2"/>
                <p class="hui">44544人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/jx6.png">
                <p class="title">北京安德鲁户外烧烤帐篷露营地</p>
                <input type="submit" value="过夜套餐"  class="n"/>
                <p class="hui">观云海，享草地清风</p>
            </li>
            <li>
                <img src="img/jx7.png">
                <p class="title">旅顺军港+闯关东影视基地+日俄监狱旧址</p>
                <input type="submit" value="可订明日"  class="n"/><input type="submit" value="立即确认"  class="n2"/>
                <p class="hui">世界知名的军事良港</p>
            </li>
            <li>
                <img src="img/jx8.png">
                <p class="title">疗养拍照两不误，快来阿纳迪酒店</p>
                <input type="submit" value="田子坊"  class="n"/><input type="submit" value="七宝老街"  class="n2"/>
                <p class="hui">7758人对此路线有兴趣</p>
            </li>
        </ul>
        <div class="jzz">
            <span class="iconfont icon-a-jiazaizhongdaxiao"></span>
            <p>加载中</p>
        </div>
    </div>
    <div class="box none">
        <ul class="stxw">
            
        </ul>
        <div class="jzz">
            <span class="iconfont icon-a-jiazaizhongdaxiao"></span>
            <p>加载中</p>
        </div>
    </div>
    <div class="box none">
        <ul class="stxw1">
            <li>
                <img src="img/dd1.png">
                <p class="title">星海广场|到亚洲最大的广场喂海鸥看日落</p>
                <input type="submit" value="老虎滩海洋公园"  class="n"/>
                <p class="hui">411人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/dd2.png">
                <p class="title">打卡著名网红地，游国际性博物馆 · 1日路线</p>
                <input type="submit" value="南京路步行街"  class="n"/><input type="submit" value="世博会博物馆"  class="n2"/>
                <p class="hui">2586人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/dd3.png">
                <p class="title">魔都旅行藏匿繁华都市的江南水乡</p>
                <input type="submit" value="朱家角古镇景区"  class="n"/><input type="submit" value="外滩"  class="n2"/>
                <p class="hui">5504人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/dd4.png">
                <p class="title">徒步登长城别有一番乐趣</p>
                <input type="submit" value="八达岭长城"  class="n"/>
                <p class="hui">661人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/dd5.png">
                <p class="title">东莞震撼大景 | 藏于山中俯视尘世的观音</p>
                <input type="submit" value="观音山旅游风景区"  class="n"/>
                <p class="hui">525人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/dd6.png">
                <p class="title">厦门最美环岛路~浪漫落日超治愈~</p>
                <input type="submit" value="骑行体验"  class="n"/>
                <p class="hui">457人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/dd7.png">
                <p class="title">享美妙的上海亲子时光路线 · 3日路线</p>
                <input type="submit" value="亲子"  class="n"/>
                <p class="hui">1902人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/dd8.png">
                <p class="title">上海杜莎夫人蜡像馆 上海必打卡的网红馆</p>
                <input type="submit" value="赏夜景"  class="n"/><input type="submit" value="特色美食"  class="n2"/>
                <p class="hui">8407人对此路线有兴趣</p>
            </li>
        </ul>
        <div class="jzz">
            <span class="iconfont icon-a-jiazaizhongdaxiao"></span>
            <p>加载中</p>
        </div>
    </div>
    <div class="box none">
        <ul class="stxw1">
            <li>
                <img src="img/dl5.png">
                <p class="title">大连元予海岛露营地 · 过夜露营</p>
                <input type="submit" value="过夜套餐"  class="n"/><input type="submit" value="可订明日"  class="n2"/>
                <p class="hui">原生态私家海岛露营地</p>
            </li>
            <li>
                <img src="img/ly1.png">
                <p class="title">上海东平森林公园房车露营地 · 过夜露营</p>
                <input type="submit" value="过夜套餐"  class="n"/><input type="submit" value="可订明日"  class="n2"/>
                <p class="hui">国家森林公园里的房车露营地</p>
            </li>
            <li>
                <img src="img/ly2.png">
                <p class="title">上海牛路野营海湾公园露营地 · 过夜露营</p>
                <input type="submit" value="过夜套餐"  class="n"/><input type="submit" value="可订今日"  class="n2"/>
                <p class="hui">有独立卫浴的帐篷营地</p>
            </li>
            <li>
                <img src="img/ly3.png">
                <p class="title">上海MORNING ISLAND早安太阳岛</p>
                <input type="submit" value="过夜套餐"  class="n"/>
                <p class="hui">出片的网红营地</p>
            </li>
            <li>
                <img src="img/ly4.png">
                <p class="title">上海嗨King野奢电影露营地 · 过夜露营</p>
                <input type="submit" value="过夜套餐"  class="n"/><input type="submit" value="可订明日"  class="n2"/>
                <p class="hui">梦回上海滩 睡在民国里</p>
            </li>
            <li>
                <img src="img/ly5.png">
                <p class="title">上海前小桔创意农场 · 过夜露营</p>
                <input type="submit" value="过夜套餐"  class="n"/><input type="submit" value="可订今日"  class="n2"/>
                <p class="hui">以柑桔为主的创意体验农场</p>
            </li>
            <li>
                <img src="img/ly6.png">
                <p class="title">上海牛路轻露营地 · 不过夜露营</p>
                <input type="submit" value="不过夜套餐"  class="n"/><input type="submit" value="可订明日"  class="n2"/>
                <p class="hui">落日余晖，渔歌唱晚</p>
            </li>
            <li>
                <img src="img/ly7.png">
                <p class="title">上海大千天鹅湖露营地 · 不过夜露营</p>
                <input type="submit" value="不过夜套餐"  class="n"/>
                <p class="hui">与上千只黑天鹅共游的露营地</p>
            </li>
        </ul>
        <div class="jzz">
            <span class="iconfont icon-a-jiazaizhongdaxiao"></span>
            <p>加载中</p>
        </div>
    </div>
    <div class="box none">
        <ul class="stxw1">
            <li>
                <img src="img/qz1.png">
                <p class="title">假日去杭州，享经典亲子路线 · 1日路线</p>
                <input type="submit" value="亲子"  class="n"/>
                <p class="hui">484人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/qz2.png">
                <p class="title">西安碑林博物馆|书法爱好者不可错过！</p>
                <input type="submit" value="亲子"  class="n"/>
                <p class="hui">5150人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/qz3.png">
                <p class="title">成都|杜甫草堂，穿越千年的诗圣生活</p>
                <input type="submit" value="亲子"  class="n"/>
                <p class="hui">1100人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/qz4.png">
                <p class="title">西安夜游好去处|钟楼散发出夺人心魄的光彩</p>
                <input type="submit" value="亲子"  class="n"/>
                <p class="hui">975人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/qz5.png">
                <p class="title">吐艳大自然无滤镜的纯洁——西岛玻璃海</p>
                <input type="submit" value="亲子"  class="n"/><input type="submit" value="取景地"  class="n2"/>
                <p class="hui">5376人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/qz6.png">
                <p class="title">一定要去人民公园喝口盖碗茶</p>
                <input type="submit" value="亲子"  class="n"/>
                <p class="hui">1101人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/qz7.png">
                <p class="title">三亚湾海水清澈，爱潜水的朋友不要错过！</p>
                <input type="submit" value="亲子"  class="n"/>
                <p class="hui">3037人对此路线有兴趣</p>
            </li>
            <li>
                <img src="img/qz8.png">
                <p class="title">大东海 | 最静谧的一片海滩偶遇最美的晚霞</p>
                <input type="submit" value="亲子"  class="n"/>
                <p class="hui">403人对此路线有兴趣</p>
            </li>
        </ul>
        <div class="jzz">
            <span class="iconfont icon-a-jiazaizhongdaxiao"></span>
            <p>加载中</p>
        </div>
    </div>
</div>

    <script>

            window.onscroll = function(){
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            if(st>head.offsetHeight){
                
                head.style.background = "#fff";
                s1.style.color = "#000";
                s2.style.color = "#000";
                tb1.style.color = "#000";
                tb2.style.color = "#000";
            }
            else{
                
                head.style.background = "rgba(255, 255, 255, 0)";
                s1.style.color = "#fff";
                s2.style.color = "#fff";
                tb1.style.color = "#fff";
                tb2.style.color = "#fff";
            }
        }


        var jlist = document.getElementsByClassName("stxw")[0];

        function addLI(li){
        var n =`
        <img src="${li.img}">
                <p class="title">${li.title}</p>
                <input type="submit" value="${li.n}"  class="n"/><input type="submit" value="${li.n2}"  class="n2"/>
                <p class="hui">${li.hui}</p>
    `
        var nli = document.createElement("li");
        nli.innerHTML = n;
        jlist.appendChild(nli);
    }

var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var json = JSON.parse(xmlhttp.responseText);
        for(var i=0; i<json.length; i++){
            addLI(json[i]);
        }
}
}
xmlhttp.open("GET","JSON/xingcheng-stxw.json", true);
xmlhttp.send();


        var tab = document.getElementById("big");
		var tt = big.getElementsByClassName("dh")[0];
		var li = dh.getElementsByTagName("li");
		var tc = big.querySelectorAll(".box");
		for (i = 0; i < li.length; i++) {
			li[i].onmouseover = function () {
				for (j = 0; j < tc.length; j++) {
					tc[j].style.display = "none";
					li[j].index = j;
					li[j].className = "";
				}
				tc[this.index].style.display = "block";
				// this.className = "quan";
				//红色的三角箭头通过css样式实现，注意.selected .pic的CSS优先级一定要高
			}
		}
    </script>
</body>
</html>